<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/layui-image-tool.js"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        //展示已知数据
        var t = table.render({
            elem: '#demo'
            , id: 'idTest'
            , page: true
            , cols: [[ //标题栏
                {field: 'id', title: 'ID'}
                ,{field: 'name', title: '姓名'}
                ,{field: 'imageUrl', title: '图片', align: 'center', templet: d => imageUtil.load(d.imageUrl)}
                ,{field: 'createTime', title: '創建日期'}
            ]]
            , done: function(res, curr, count){
                // 必须-加载图片默认样式
                imageUtil.style();
            }
            , parseData: function (res) {
                var data = null
                var total = 0;
                if (res.data) {
                    data = res.data.data
                    total = res.data.total
                }
                return {
                    "code": 0,
                    "data": data,
                    "count": total
                };
            }
            , data: [{
                "id": 10000
                , "name": "Test1"
                , "imageUrl": "http://i2.tiimg.com/675940/d7dab4a01fcf4618.jpg"
                , "createTime": "2019-10-22 17:49:00"
            }, {
                "id": 10010
                , "name": "Test2"
                , "imageUrl": "http://i2.tiimg.com/675940/bf91175262faf0fd.jpg"
                , "createTime": "2019-10-22 17:49:00"
            }, {
                "id": 10086
                , "name": "Test3"
                , "imageUrl": ""
                , "createTime": "2019-10-22 17:49:00"
            }]
        });
    });
</script>
</html>